<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import indexText from './index.json'
import {requestRecommenSongList} from "../../utils/axiosURL";
import PlayListIntroduction from '@components/common/PlaylistIntroduction/index.vue'

// 推荐歌单数据
const recommenSongList = reactive<any>([])
const recommenSongList2 = reactive<any>([])
const getDay = reactive(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])


// 雷达歌单
const RadarSongList = () => {
  requestRecommenSongList(5).then((data: any) => {
    recommenSongList.values = data.result
  }).catch(_ => { })
}

// 好音乐加油
const GoodMusicSongList = () => {
  requestRecommenSongList(100).then((data: any) => {
    recommenSongList2.values = data.result
  }).catch(_ => { })
}

onMounted(() => {
  RadarSongList()
  GoodMusicSongList()
})
</script>


<template>
  <div class="customizationWrap">
    <!-- 雷达歌单(找不接口数据由其他接口数据代替) -->
    <div class="radarWrap">
      <p class="radar">{{ indexText.yoursRadarSongList }}</p>
      <p class="radarDesc">{{ indexText.radarDesc }}</p>
      <div v-if="recommenSongList.values.length !== 0" class="everydayRecommen">
        <PlayListIntroduction
            v-for="item in recommenSongList.values"
            :picUrl="`${item.picUrl}`"
            :name="`${item.name}`"
            :playcount="`${item.playCount}`"
            :id="`${item.id}`"
        />
      </div>
      <div v-else class="everydayRecommen">
        <playListIntroduceSkeleton v-for="item in 10" />
      </div>
    </div>
    <!-- 好音乐为你加油(找不到接口数据由其他接口数据代替) -->
    <div class="goodMusic">
      <p class="radar">好音乐{{getDay[new Date().getDay() - 1]}}为你加油</p>
      <div v-if="recommenSongList2.values.length !== 0" class="everydayRecommen">
        <PlayListIntroduction
          v-for="item in recommenSongList2.values"
          :picUrl="`${item.picUrl}`"
          :name="`${item.name}`"
          :playcount="`${item.playCount}`"
          :id="`${item.id}`"
        />
      </div>
      <div v-else class="everydayRecommen">
        <playListIntroduceSkeleton v-for="item in 10" />
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.customizationWrap {
  width: 100%;
  height: 93%;
  padding-bottom: 100px;
  box-sizing: border-box;
  overflow: auto;

  // 雷达歌单
  .radarWrap {
    width: 100%;
    margin-top: 10px;

    .radar { @extend .moduleTitle; }
    .radarDesc { @extend .smallGreyCopyWrite; }

    // 歌单
    .everydayRecommen {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      width: 100%;
      margin-top: 10px;

      // 歌单的每一项
      .songItem {
        position: relative;
        width: 18%;
        margin-right: 15px;

        .imgWrap {
          position: relative;
          overflow: hidden;

          .itemBkImg {
            width: 100%;
            height: 140px;
            max-height: 211px;
            border-radius: $borderRadius8;
          }

          .calendarImg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 95px;
            height: 92px;
            text-align: center;
          }

          .getDate {
            position: absolute;
            top: calc(50% - 15px);
            left: calc(50% - 23px);
            color: $font_hover_color;
            font-family: $activeTextFont;
            font-size: 44px;
          }

          .topInfomation {
            position: absolute;
            top: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.489);
            border-radius: $borderRadius8 $borderRadius8 0 0;
            font-size: $font-size-sm;
            padding: 4px;
            box-sizing: border-box;
            color: $font_default_color ;
            font-family: $textFont;
            transform: translateY(-100%);
            transition: .4s;
          }

          .playBtn {
            display: inline-block;
            opacity: 0;
            position: absolute;
            right: 8px;
            bottom: 12px;
            width: 30px;
            height: 30px;
            background-color: $theme-white;
            border-radius: 50%;
            transition: 1s;

            img {
              position: absolute;
              top: 1px;
              right: 0;
              bottom: 0;
              left: 3px;
              margin: auto;
              width: 24px;
              height: 24px;
            }
          }

          &:hover .topInfomation {
            transform: translateY(0%);
          }

          &:hover .playBtn {
            opacity: 1;
          }
        }

        .songListDesc {
          font-family: $textFont;
          font-size: $font-size-sm;
          line-height: 20px;
        }
      }
    }
  }
  // 好音乐为你加油
  .goodMusic {
    width: 100%;
    margin-top: 20px;

    .radar { @extend .moduleTitle; }

    // 歌单
    .everydayRecommen {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      width: 100%;
      margin-top: 10px;

      // 歌单的每一项
      .songItem {
        position: relative;
        width: 18%;
        margin-right: 15px;

        .imgWrap {
          position: relative;
          overflow: hidden;

          .itemBkImg {
            width: 100%;
            height: 140px;
            max-height: 211px;
            border-radius: $borderRadius8;
          }

          .calendarImg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 95px;
            height: 92px;
            text-align: center;
          }

          .getDate {
            position: absolute;
            top: calc(50% - 15px);
            left: calc(50% - 23px);
            color: $font_hover_color;
            font-family: $activeTextFont;
            font-size: 44px;
          }

          .topInfomation {
            position: absolute;
            top: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.489);
            border-radius: $borderRadius8 $borderRadius8 0 0;
            font-size: $font-size-sm;
            padding: 4px;
            box-sizing: border-box;
            color: $font_default_color ;
            font-family: $textFont;
            transform: translateY(-100%);
            transition: .4s;
          }

          .playBtn {
            display: inline-block;
            opacity: 0;
            position: absolute;
            right: 8px;
            bottom: 12px;
            width: 30px;
            height: 30px;
            background-color: $theme-white;
            border-radius: 50%;
            transition: 1s;

            img {
              position: absolute;
              top: 1px;
              right: 0;
              bottom: 0;
              left: 3px;
              margin: auto;
              width: 24px;
              height: 24px;
            }
          }

          &:hover .topInfomation {
            transform: translateY(0%);
          }

          &:hover .playBtn {
            opacity: 1;
          }
        }

        .songListDesc {
          font-family: $textFont;
          font-size: $font-size-sm;
          line-height: 20px;
        }
      }
    }
  }
}

:deep(.el-skeleton) {
  margin: 0 10px 0 0;
}
</style>
